<template>
  <div class="icon-text" :style="{ color }">
    <!-- 加载菊花 -->
    <el-icon v-if="loading" class="is-loading" :style="{ marginRight: newMargin }">
      <icon-ep-loading></icon-ep-loading>
    </el-icon>
    <!-- 前边图标 -->
    <el-icon v-if="!loading && icon" key="el-icon-2" :style="{ marginRight: newMargin }">
      <component :is="icon"></component>
    </el-icon>
    <!-- 文字 -->
    <span v-if="text">{{ text }}</span>
    <!-- 后边图标 -->
    <el-icon v-if="rIcon" key="el-icon-3" class="is-loading" :style="{ marginLeft: newMargin }">
      <component :is="icon"></component>
    </el-icon>
  </div>
</template>

<script setup lang="ts">
  const props = defineProps({
    /** 加载状态 */
    loading: { type: Boolean, default: false },
    /** 文字前面的图标 */
    icon: { type: [String, Object] as PropType<Component | string>, default: '' },
    /** 文字前面的图标 */
    rIcon: { type: [String, Object] as PropType<Component | string>, default: '' },
    /** 图标和文字的颜色 */
    color: { type: String, default: 'inherit' },
    /** 显示的文字 */
    text: { type: String, default: '' },
    /** 文字和图标之间的间距 */
    margin: { type: Number, default: 0 }, // 间距
  });

  const newMargin = computed(() => {
    if (props.margin > 0) {
      return `${props.margin}px`;
    } else {
      const globalSize = useGlobalStore().globalSize;
      return globalSize === 'large' ? '8px' : globalSize === 'small' ? '4px' : '6px';
    }
  });
</script>

<style lang="scss" scoped>
  .icon-text {
    @include flex(row, nowrap, center, center, center);
  }
</style>
